<template>
  <div class="home-container h-full flex-center">
    <div class="modules-grid">
      <div class="module-card cursor-pointer" @click="navigateTo('/todo')">
        <div class="module-icon mb-lg">
          <el-icon :size="64" color="#409EFF">
            <Document />
          </el-icon>
        </div>
        <h2 class="title text-center">Todo</h2>
        <p class="text-secondary text-center mt-sm">待办事项管理</p>
      </div>

      <div class="module-card cursor-pointer" @click="navigateTo('/moments')">
        <div class="module-icon mb-lg">
          <el-icon :size="64" color="#67C23A">
            <Calendar />
          </el-icon>
        </div>
        <h2 class="title text-center">Moments</h2>
        <p class="text-secondary text-center mt-sm">时光记录</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Document, Calendar } from '@element-plus/icons-vue'

const router = useRouter()

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.home-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: var(--spacing-3xl);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3xl);
  max-width: 800px;
}

.module-card {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  padding: var(--spacing-3xl);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  min-width: 280px;
}

.module-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.module-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .modules-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
}
</style>
